<template>
	<view class="wrapper">
		<uni-nav-bar left-icon="back" right-icon="more-filled" @clickLeft="$back()" @clickRight="showAlert"></uni-nav-bar>
		<view class="info_box center">
			<dimg :src="userId | avatar" class="avatar"></dimg>
			<view class="flex">
				<view class="friend_name f32 center flex-start">
					{{ !userinfo.friends?userinfo.nickname: (userinfo.friends.remarkName || userinfo.nickname) }}
					<image src="../../static/friend/man.png" mode="aspectFill" class="frien_sex" v-if="userinfo.sex == 1"></image>
					<image src="../../static/friend/woman.png" mode="aspectFill" class="frien_sex" v-if="userinfo.sex == 0"></image>
				</view>
				<view class="f26 c666">通讯号：{{ userinfo.account }}</view>
				<!-- <view class="f26 c666">地区:江苏-徐州市</view> -->
			</view>
		</view>
		<view class="user_box center" @tap="changeAlert('请输入备注名', '', true)" v-if="userinfo.userType == 0">
			<view class="f30 c333 flex">设置备注和标签</view>
			<image src="../../static/arr_right.png" mode="widthFix" class="arr_right"></image>
		</view>
		<view class="user_box center" @tap="$open('../friend/friendLabel?userId=' + userId)" v-if="userinfo.userType == 0">
			<view class="f30 c333 flex">标签</view>
			<view class="f30 c666">
				<text v-for="(val, index) in tagList" :key="index">
					{{ val.groupName }}
					<block v-if="index != tagList.length - 1">,</block>
				</text>
			</view>
			<image src="../../static/arr_right.png" mode="widthFix" class="arr_right"></image>
		</view>
		<view class="hr"></view>
		<view class="user_box center">
			<view class="f30 c333 flex">出生日期</view>
			<view class="f30 c666">{{ userinfo.birthday | birtime }}</view>
		</view>
		<view class="user_box center">
			<view class="f30 c333 flex">手机号</view>
			<view class="f30 c666">{{ userinfo.phone }}</view>
		</view>
		<view class="user_box center">
			<view class="f30 c333 flex">上次在线时间</view>
			<view class="f30 c666">{{ userinfo.showLastLoginTime | time }}</view>
		</view>
		<!-- 		<view class="hr"></view>
		<view class="user_box center">
			<view class="f30 c333 flex">二维码</view>
			<image src="../../static/friend/code.png" mode="aspectFill" class="code_img"></image>
			<image src="../../static/arr_right.png" mode="aspectFit" class="arr_right"></image>
		</view>
		<view class="user_box center">
			<view class="f30 c333 flex">所在位置</view>
			<image src="../../static/arr_right.png" mode="aspectFit" class="arr_right"></image>
		</view> -->
		<view class="hr"></view>
		<block v-if="userinfo.friends">
			<view class="user_box center add_friend" v-if="userinfo.friends.blacklist == 1" @tap="blacklistDelete">移除黑名单</view>
			<view class="user_box center add_friend" v-if="userinfo.userType == 0 && userinfo.friends.blacklist == 0" @tap="$open('../chatFriend/chatFriend?userId=' + userId)">
				<image src="../../static/friend/news.png" mode="aspectFill" class="new_img"></image>
				发消息
			</view>
		</block>
		<view class="user_box center add_friend" v-if="!userinfo.friends"  @tap="addFriend">加为好友</view>
		<!-- 加号弹出层 -->
		<view class="alert-wrapper" :style="{ left: alertTop }" @tap="showAlert">
			<image src="../../static/index/arrTop.png" mode="aspectFill" class="arr_top"></image>
			<view class="alert_list">
				<view class="center" @tap.stop="changeAlert('请输入备注名', '', true)" v-if="userinfo.friends"><view class="f30">设置备注</view></view>
				<view class="center" @tap.stop="$open('../friend/friendLabel?userId=' + userId)" v-if="userinfo.friends"><view class="f30">设置标签</view></view>
				<block v-if="userinfo.friends">
					<view class="center" @tap.stop="changeAlert('加入黑名单', '确定将该好友加入黑名单？')" v-if="userinfo.friends && userinfo.friends.blacklist == 0">
						<view class="f30">加入黑名单</view>
					</view>
				</block>
				<view class="center" @tap.stop="changeAlert('删除好友', '确定删除该好友？')" v-if="userinfo.friends"><view class="f30">删除好友</view></view>
				<view class="center" @tap.stop="addFriend" v-if="!userinfo.friends"><view class="f30">加为好友</view></view>
				<picker mode="selector" :range="ReportList" @change="ReportChange">
					<view class="center" @tap="$open('./addFriend')"><view class="f30">举报</view></view>
				</picker>
			</view>
		</view>
		<alert :alertTitle="alertTitle" :showInput="showInput" :alertText="alertText" @alertConfirm="alertConfirm" v-if="alertTitle != ''"></alert>
	</view>
</template>

<script>
// userType 0 我的好友 2不是好友
import WEBIM from '@/common/webim.js';
export default {
	data() {
		return {
			alertTop: '100%',
			alertTitle: '',
			alertText: '',
			showInput: false,
			ReportList: [
				'发布不适当内容对我造成骚扰',
				'发布色情内容对我造成骚扰',
				'发布违法违禁内容对我造成骚扰',
				'发布赌博内容对我造成骚扰',
				'发布整治造谣内容对我造成骚扰',
				'发布爆恐血腥内容对我造成骚扰',
				'发布其他违规内容对我造成骚扰',
				'存在欺诈骗钱行为',
				'此账号可能被盗用',
				'存在侵权行为',
				'发布仿冒品信息'
			],
			userinfo: '',
			tagList: []
		};
	},
	onLoad(e) {
		this.userId = e.userId;
		this.userGet();
	},
	onShow() {
		this.friendGroupList();
	},
	methods: {
		// 加为好友
		addFriend(){
			this.$ajax(this.apiList.attentionAdd, {
				toUserId: this.userId
			}).then(res => {
				this.$sToast(res.resultMsg)
				var msg = WEBIM.createMessage(500, '你好,我是'+uni.getStorageSync('userinfo').nickname, this.userId, this.userinfo.nickname, 'chat');
				msg.id = msg.messageId;
				WEBIM.sendMessage(msg);
			});
		},
		// 移除黑名单
		blacklistDelete(){
			this.$ajax(this.apiList.blacklistDelete, {
				toUserId: this.userId
			}).then(res => {
				this.userGet();
			});
		},
		// 加入黑名单
		blacklistAdd() {
			let that = this;
			that.$ajax(that.apiList.blacklistAdd, {
				toUserId: that.userId
			}).then(res => {
				that.userGet();
			});
		},
		// 查询标签
		friendGroupList() {
			this.$ajax(this.apiList.friendGroupList).then(res => {
				res.data = res.data.filter(item => {
					item.userIdList = item.userIdList.filter(val => {
						return val == this.userId;
					});
					return item.userIdList.length > 0;
				});
				this.tagList = res.data;
			});
		},
		// 查询用户信息
		userGet() {
			this.$ajax(this.apiList.userGet, {
				userId: this.userId
			}).then(res => {
				this.userinfo = res.data;
			});
		},
		// 举报
		ReportChange(e) {
			this.$ajax(
				this.apiList.userReport,
				{
					reason: 10 + e.detail.value,
					toUserId:this.userId
				},
				'GET'
			).then(res => {
				this.$sToast('举报成功');
				this.alertTop='100%'
			});
		},
		// 切换弹出层
		changeAlert(alertTitle, alertText, showInput) {
			this.alertText = alertText;
			this.alertTitle = alertTitle;
			this.showInput = showInput || false;
		},
		alertConfirm(type, text) {
			if (type == 1 && this.alertTitle == '请输入备注名') {
				this.friendsRemark(text);
			}else if(type == 1 && this.alertTitle == '加入黑名单'){
				this.blacklistAdd()
			}else if(type == 1 && this.alertTitle == '删除好友'){
				this.friendsDelete()
			}
			this.alertTitle = '';
			this.alertTop='100%'
		},
		friendsDelete(){
			this.$ajax(this.apiList.friendsDelete, {
				toUserId: this.userId
			}).then(res => {
				let list=uni.getStorageSync('list')
				list.map((item,index) => {
					if(item.fromUserId==this.userId){
						list.splice(index,1)
					}
				})
				uni.setStorageSync('list',list)
				this.$sToast('删除成功');
				this.$back(2,1500)
			});
		},
		// 切换按钮蒙层
		showAlert() {
			this.alertTop == 0 ? (this.alertTop = '100%') : (this.alertTop = 0);
		},
		// 设置好友备注
		friendsRemark(remarkName) {
			this.$ajax(this.apiList.friendsRemark, {
				remarkName: remarkName,
				describe: '',
				toUserId: this.userId
			}).then(res => {
				this.$sToast('设置成功');
				this.userGet();
			});
		}
	}
};
</script>

<style lang="scss">
.new_img {
	width: 36rpx;
	height: 30rpx;
	margin-right: 19rpx;
}
.alert-wrapper {
	.alert_list {
		background: #ffffff;
		width: 345rpx;
		border-radius: 12rpx;
		position: absolute;
		top: 105rpx;
		right: 10rpx;
		.center {
			padding: 28rpx 45rpx;
			justify-content: flex-start;
		}
		image {
			width: 40rpx;
			height: 39rpx;
			margin-right: 33rpx;
		}
	}
	.arr_top {
		width: 30rpx;
		height: 40rpx;
		position: absolute;
		top: 80rpx;
		right: 40rpx;
	}
}
.add_friend {
	color: #0297fe;
}
.hr {
	height: 22rpx;
	border-top: 1rpx solid #e0e0e0;
}
.user_box {
	border-top: 1rpx solid #e0e0e0;
	height: 104rpx;
	padding: 0 31rpx;
	background: #ffffff;
	.code_img {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	.arr_right {
		width: 30rpx;
		height: 24rpx;
	}
	.flex {
		font-weight: 600;
	}
}
.info_box {
	padding: 33rpx 30rpx 70rpx;
	background: #ffffff;
	.friend_name {
		font-weight: bold;
		.frien_sex {
			width: 24rpx;
			height: 28rpx;
			margin-left: 19rpx;
		}
	}
	.f26 {
		margin-top: 14rpx;
	}
	.avatar {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		margin-right: 40rpx;
		overflow: hidden;
	}
}
page {
	background: #f3f3f3;
}
</style>
